<template>
    <div>
        <div class="header">
            <span><img src="../assets/fanhui.png" alt=""  @click="Img"></span>
           <h4>快递单评价</h4>
            <span class="home"><img src="../assets/fanhuishouye.png" alt=""></span>

        </div>
        <!-- 评分 -->
        <!-- <div class="raiseClick">
            <p>总体评分</p>
            <span >{{value}}分</span>
          <van-rate @change="onChange" v-model="value" :icon="xiaolian" :void-icon="meet"  :count="10"/>
        </div> -->
           <div class="top">
      <p>总体评分</p>
      <p>
        <span>{{data.totalScore*2 }}</span
        >分
      </p>
      <p class="active">
        <van-rate
          v-model="data.totalScore"
          :icon="xiaolian"
          :void-icon="meet"
          :count="5"
        />
      </p>
    </div>
    <div class="content">
      <p>店铺评分</p>
      <ul>
        <li>
          <div class="left">店铺评分</div>
          <div class="center">
            <van-rate
              v-model="data.shop"
              :size="30"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
          </div>
        </li>
        <li>
          <div class="left">物流速度</div>
          <div class="center">
            <van-rate
              v-model="data.logistics"
              :size="30"
              color="#ff8d5b"
              void-icon="star"
              void-color="#eee"
            />
          </div>
        </li>
        <li>
          <div class="left">快递评分</div>
          <div class="center">
            <van-rate
              v-model="data.express"
              :size="30"
              color="#ff5d5e"
              void-icon="star"
              void-color="#eee"
            />
          </div>
        </li>
      </ul>
    </div>
    <div class="bottom" >
      <van-field
        v-model="data.info"
        rows="6"
        autosize
        type="textarea"
        placeholder="此用户没有填写评价"
        show-word-limit
      />
        <van-swipe :show-indicators="false" :loop="false" :width="300">
        <van-swipe-item v-for="(item, index) in imgs" :key="index">
          <img
            :src="item"
            width="100%"
            height="120"
            style="display: block"
            alt
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
import {GetExpressDet} from '../raxios/api'
export default {
    data () {
        return {
            totalPoints:0,
            meet:require('../assets/总图标包含整个系统的/shangxin.png'),
            xiaolian:require('../assets/总图标包含整个系统的/xiaolian.png'),
            data:[],
            imgs:[],
            value1: 1,
            value2: 1,
            value3: 1,
            message: "",
            fileList: [
        { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' , isImage: true },
      ],
            
        }
    },
    created(){
    GetExpressDet(this.$route.query.id,).then(res=>{
        console.log(res);
        this.data =res.data
        this.imgs =res.data.imgs
    })
    },
     methods: {
         Img(){
            this.$router.go(-1)
         }
  },
}
</script>
 
<style lang = "less" scoped>
    .header{
        padding: 0 0.2rem;
        line-height: 0.6rem;
        height: 0.64rem;
        background-color: #003399;
        display: flex;
        justify-content: space-between;
        color: #fff;
        span img{
            display: block;
            width: 0.14rem;
            height: 0.2rem;
            margin-top: 0.19rem;
        }
       .home img{
           display: block;
            width: 0.24rem;
            height: 0.22rem;
  }
       
    }
.top {
  height: 1.4rem;
  border-bottom: 1px solid #e5e5e5;
  background-color: #fff;

  p {
    height: 0.3rem;
    line-height: 0.3rem;
    text-align: center;
    &:nth-child(2) {
      color: #ffb601;
      height: 0.4rem;
      line-height: 0.4rem;
      span {
        font-size: 0.4rem;
      }
    }
  } 
   .active {
    margin-top: 0.1rem;
    /deep/.van-rate__icon {
      font-size: 0.32rem;
      margin-left: 0.3rem;
    }
    &:last-child {
      margin-right: 0;
    }
  }   
}
.content {
    padding: 0;
  p {
    height: 0.6rem;
    line-height: 0.6rem;
    background-color: #fff;
    padding-left: 0.2rem;
    font-size: 0.15rem;
    border-bottom: 1px solid #e5e5e5;
  }
  ul {
    padding: 0 0.4rem;
    background-color: #fff;
    li {
      height: 0.5rem;
      line-height: 0.5rem;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px dashed #efefef;
      .center {
        margin-left: 0.2rem;
        .van-rate {
          margin-top: 0.12rem;
        }
      }
    }
  }


  
}
</style>